<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="bg-gray-50 min-h-[1024px]">
    <div class="flex w-[1440px] mx-auto">
      <aside
        class="w-[240px] bg-white shadow-sm min-h-[1024px] border-r border-gray-200"
      >
        <div class="p-6">
          <div class="text-xl font-bold mb-8">个人中心</div>
          <nav class="space-y-2">
            <a
              v-for="(item, index) in menuItems"
              :key="index"
              href="#"
              class="flex items-center px-4 py-2 rounded-md"
              :class="[
                currentMenu === item.key
                  ? 'text-primary bg-blue-50'
                  : 'text-gray-600 hover:bg-gray-50',
              ]"
            >
              <component :is="item.icon" class="w-5 h-5 mr-3" />
              <span>{{ item.label }}</span>
            </a>
          </nav>
        </div>
      </aside>

      <main class="flex-1 p-8 bg-gray-50">
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div class="flex justify-between items-start mb-6">
            <div class="flex items-start gap-6">
              <img
                :src="userAvatar"
                class="w-[100px] h-[100px] rounded-full object-cover"
                alt="捐赠者头像"
              />
              <div>
                <h1 class="text-2xl font-bold mb-2">{{ userName }}</h1>
                <p class="text-gray-600">{{ userRole }}</p>
              </div>
            </div>
            <div class="flex gap-4">
              <a-button
                type="primary"
                class="!rounded-button"
                @click="handleOrder"
              >
                <template #icon><ShoppingCartOutlined /></template>
                订购冷冻卵子
              </a-button>
              <a-button class="!rounded-button" @click="handleCollect">
                <template #icon><HeartOutlined /></template>
                收藏
              </a-button>
              <a-button class="!rounded-button" @click="handleBack">
                <template #icon><ArrowLeftOutlined /></template>
                返回搜索
              </a-button>
            </div>
          </div>

          <div class="border-b border-gray-200">
            <a-tabs v-model:activeKey="activeTab">
              <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.label" />
            </a-tabs>
          </div>
        </div>

        <div class="space-y-6">
          <div class="bg-white rounded-lg shadow-sm p-6">
            <table class="w-full border-collapse">
              <tbody>
                <tr>
                  <td
                    v-for="(section, index) in profileSections.slice(0, 4)"
                    :key="index"
                    class="border p-4 w-1/4 align-top"
                  >
                    <h3 class="text-lg font-bold mb-2">{{ section.title }}</h3>
                    <div class="space-y-2">
                      <p v-for="(item, idx) in section.items" :key="idx">
                        <span class="text-gray-500">{{ item.label }}：</span
                        >{{ item.value }}
                      </p>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td
                    v-for="(section, index) in profileSections.slice(4)"
                    :key="index + 4"
                    class="border p-4 align-top"
                  >
                    <h3 class="text-lg font-bold mb-2">{{ section.title }}</h3>
                    <div class="space-y-2">
                      <template v-if="section.title === '家族遗传史'">
                        <p class="text-gray-500">父母：</p>
                        <p class="ml-2">父亲：172cm/68kg，水电工</p>
                        <p class="ml-2">母亲：155cm/42kg，理财经理</p>
                        <p class="mt-2">祖辈：均已去世，无重大遗传病史记录</p>
                      </template>
                      <template v-else>
                        <p v-for="(item, idx) in section.items" :key="idx">
                          <span v-if="item.label" class="text-gray-500"
                            >{{ item.label }}：</span
                          >{{ item.value }}
                        </p>
                      </template>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 text-center">
          <h2 class="text-xl font-bold mb-4">联系国际卵精库</h2>
          <a-button
            type="primary"
            class="!rounded-button"
            @click="handleContact"
          >
            <template #icon><PhoneOutlined /></template>
            立即联系
          </a-button>
        </div>
      </main>
    </div>
  </div>
</template>

<script  setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

// const route = useRoute();
//     const id = route.params.id; // 通过 route.params 获取动态路由参数
//     return { id };


import {
  HomeOutlined,
  VideoCameraOutlined,
  AudioOutlined,
  HeartOutlined,
  HistoryOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  ArrowLeftOutlined,
  PhoneOutlined,
} from "@ant-design/icons-vue";

const router = useRouter();
const currentMenu = ref("home");
const activeTab = ref("profile");

const menuItems = [
  { key: "home", label: "个人中心", icon: HomeOutlined },
  { key: "video", label: "视频匹配", icon: VideoCameraOutlined },
  { key: "audio", label: "语音匹配", icon: AudioOutlined },
  { key: "favorites", label: "收藏夹", icon: HeartOutlined },
  { key: "history", label: "最近查看", icon: HistoryOutlined },
  { key: "profile", label: "修改个人资料", icon: UserOutlined },
];

const tabs = [
  { key: "overview", label: "总览" },
  { key: "profile", label: "个人档案" },
  { key: "gene", label: "基因报告" },
  { key: "video", label: "视频资料" },
  { key: "photo", label: "图片资料" },
];

const userName = "捐赠者 1135";
const userRole = "冷冻卵子库存";
const userAvatar =
  "https://ai-public.mastergo.com/ai/img_res/0a93502bb23cc4e912a9089837a5387b.jpg";

const profileSections = [
  {
    title: "基础信息",
    items: [
      { label: "婚姻状况", value: "已婚" },
      { label: "种族", value: "亚裔（华裔）" },
      { label: "吸烟史", value: "无" },
      { label: "居住地", value: "中国台湾地区" },
    ],
  },
  {
    title: "医疗史",
    items: [
      { label: "月经周期", value: "规律（初潮12岁，周期30天）" },
      { label: "妊娠史", value: "无怀孕/流产/分娩记录" },
      { label: "传染病史", value: "无性传播疾病、肝炎、HIV等" },
      { label: "手术史", value: "无重大手术或住院记录" },
      { label: "过敏史", value: "无" },
    ],
  },
  {
    title: "身体特征",
    items: [
      { label: "血型", value: "O型阳性" },
      { label: "身高/体重", value: "163cm/47.2kg" },
      { label: "眼睛/发色", value: "棕色/黑色" },
      { label: "视力/牙齿", value: "优（无矫正需求）" },
    ],
  },
  {
    title: "教育背景",
    items: [
      { label: "最高学历", value: "大学（美发设计系，GPA 3.7）" },
      { label: "语言能力", value: "中文/闽南语（母语）、英语（基础）" },
      { label: "特长", value: "数学、绘画、滑冰、手工艺" },
    ],
  },
  {
    title: "职业与动机",
    items: [
      { label: "现任职业", value: "头皮护理讲师（2017年至今）" },
      { label: "捐赠动机", value: "帮助准父母获得健康宝宝" },
      { label: "个人目标", value: "成为营销活动策划师" },
    ],
  },
  {
    title: "家族遗传史",
    items: [],
  },
  {
    title: "疾病筛查",
    items: [
      { value: "无心血管、血液、神经系统等遗传性疾病" },
      { value: "无精神疾病或染色体异常史" },
    ],
  },
  {
    title: "生活习惯",
    items: [
      { label: "饮食", value: "偏好蔬菜/甜食" },
      { label: "运动", value: "每周3-5次" },
      { label: "咖啡因", value: "每日1杯" },
    ],
  },
];

const handleOrder = () => {
  console.log("订购");
};

const handleCollect = () => {
  console.log("收藏");
};

// const handleBack = () => {
//   router.push("/index");
// };

// const handleBack = async () => {
//   try {
//     await router.push("/index");
//     console.log("跳转成功");
//   } catch (err) {
//     console.error("路由跳转失败:", err);
//     // 备用方案：使用 window.location 作为兜底
//     window.location.href = "/index";
//   }
// };
const handleBack = () => {
  // 先尝试路由跳转
  router.push("/index").catch(() => {
    // 如果失败，使用原生跳转
    window.location.href = "/index";
  });
};

const handleContact = () => {
  console.log("联系");
};
</script>

<style scoped>
:deep(.ant-tabs-nav) {
  margin: 0;
}

:deep(.ant-tabs-nav::before) {
  border: none;
}

:deep(.ant-tabs-tab) {
  padding: 12px 0;
  margin: 0 32px 0 0;
}

:deep(.ant-tabs-ink-bar) {
  height: 2px;
  background: #2563eb;
}

:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #2563eb !important;
}
</style>
